<template>
  <div>
    <h1>Bus</h1>
    <ParentVue />
    <p>爷爷的age：{{ age }}</p>
  </div>
</template>
<script>
/**
 *  如果将来遇上跨多级进行数据传递，需要使用 eventbus 中央事件总线
 *
 *      1. const $bus = new Vue()
 *      2. $bus.$on(事件,处理程序)
 *      3. $bus.$emit(事件,数据)
 *          --  事实上这个东西就是一个发布订阅模式
 */

import ParentVue from "./Parent1.vue";
import $bus from "../utils/bus";
export default {
  components: {
    ParentVue,
  },
  data() {
    return {
      age: 110,
    };
  },
  created() {
    // 这个方式是我们需要把 $bus 放到 原型上的
    // this.$bus.$on("cus-event", (num) => {
    //   this.age += num;
    // });

    // 导入的$bus
    $bus.$on("cus-event", (num) => {
      this.age += num;
    });
  },
};
</script>
